<script setup>
import { Postcard } from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import axios from "axios";
import { useStateStore } from "@/stores/counter.js";
import { certificateAPI } from "@/apis/anay.js";

const stateStore = useStateStore();
const route = useRoute();
const cerInfo = ref({});
const loading = ref(true);

onMounted(async () => {
  const filepath = route.query.filepath;
  cerInfo.value = (await certificateAPI(filepath)).data.certificate;
  stateStore.changeCer();
  loading.value = false;
});
</script>
<template>
  <el-card
    shadow="always"
    style="margin-bottom: 10px"
    v-loading="loading"
    element-loading-text="分析中..."
  >
    <template #header
      ><SvgIcon
        iconName="icon-zhengshuyanzhen"
        style="margin-right: 5px"
      ></SvgIcon
      >签名证书
    </template>
    <div class="detail">
      <div class="mycard">
        <el-icon style="font-size: 70px"><Postcard /></el-icon>
        <div class="cer" v-if="cerInfo.validity === '合格'">
          <div class="val">{{ cerInfo.validity }}</div>
          <div class="val">{{ cerInfo.reason }}</div>
        </div>
        <div class="cer" v-else>
          <div class="val2">{{ cerInfo.validity }}</div>
          <div class="val2">{{ cerInfo.reason }}</div>
        </div>
      </div>
      <div style="margin-left: 20px">APK已签名</div>
      <div>
        <span class="badge"> V1签名</span>{{ cerInfo.v1_signature || "N/A" }}
      </div>
      <div>
        <span class="badge"> V2签名</span>{{ cerInfo.v2_signature || "N/A" }}
      </div>
      <div>
        <span class="badge"> V3签名</span>{{ cerInfo.v3_signature || "N/A" }}
      </div>
      <div>
        <span class="badge"> 主题</span>{{ cerInfo.cert_subject || "N/A" }}
      </div>
      <div>
        <span class="badge"> 唯一证书</span
        >{{ cerInfo.unique_certificates || "N/A" }}
      </div>
      <div>
        <span class="badge"> 签发者</span>{{ cerInfo.cert_issuer || "N/A" }}
      </div>
      <div>
        <span class="badge"> 序列号</span
        >{{ cerInfo.cert_serial_number || "N/A" }}
      </div>
      <div>
        <span class="badge"> 生效日期</span
        >{{ cerInfo.cert_not_valid_before || "N/A" }}
      </div>
      <div>
        <span class="badge"> 失效日期</span
        >{{ cerInfo.cert_not_valid_after || "N/A" }}
      </div>

      <div>
        <span class="badge"> SHA-1</span>{{ cerInfo.cert_sha1 || "N/A" }}
      </div>
      <div>
        <span class="badge"> SHA-256</span>{{ cerInfo.cert_sha256 || "N/A" }}
      </div>
      <div>
        <span class="badge"> 证书签名算法</span
        >{{ cerInfo.cert_signature_algorithm || "N/A" }}
      </div>
      <div>
        <span class="badge"> 证书哈希算法</span
        >{{ cerInfo.cert_hash_algorithm || "N/A" }}
      </div>
      <div>
        <span class="badge"> 证书公钥算法</span
        >{{ cerInfo.cert_public_key_algorithm || "N/A" }}
      </div>
      <div>
        <span class="badge"> 证书密钥长度</span
        >{{ cerInfo.cert_key_length || "N/A" }}
      </div>
    </div>
  </el-card>
</template>

<style scoped>
.val {
  height: 35px;
  width: 190px;
  border-bottom: 2px solid #d28779;
  text-align: center;
  line-height: 35px;
  margin-left: 35px;
}
.val {
  height: 35px;
  width: 190px;
  border-bottom: 2px solid #90d79e;
  text-align: center;
  line-height: 35px;
  margin-left: 35px;
}
.cer {
  display: flex;
  flex-direction: column;
}
.mycard {
  margin-bottom: 10px;
  border-radius: 4px;
  border-color: #e4e7ed;
  width: 300px;
  border-style: solid;
  border-width: 2px;
  display: flex;
  padding: 0 10px;
  height: 76px;
}
.badge {
  width: 125px;
  display: inline-block;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  margin-bottom: 5px;
  background-color: #dbe9f8;
  color: #429fff;
  padding: 0.25em 0.4em;
  margin-right: 5px;
  font-size: 13px;
}
.detail {
  display: flex;
  flex-direction: column;
}
::v-deep .el-card__header {
  font-weight: bold;
}
</style>